<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">

    <script src="lib/d3.v5.min.js"></script>
    <script type="text/javascript" src="lib/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="lib/axios.min.js"></script>
    <script type="text/javascript" src="lib/vue.js"></script>
    <link rel="stylesheet" href="lib/leaflet/leaflet.css">
    <script type="text/javascript" src="lib/topojson.v3.min.js"></script>
    <script type="text/javascript" src="lib/d3-geo-projection.v2.min.js"></script>
    
    <title>疫情变化</title>
</head>

<body>
    <svg id='map'>

    </svg>

    <div class='chart' id='user-options-panel'>
        <div>
            <strong>（提示：图表可缩放）</strong>
        </div>

        <div class='sub-header'>
            <strong>疫情累计统计</strong>
        </div>
        <div>每日累计人数统计</div>
        <div>每日累计总确诊人数</div>
        <div>每日累计总康复人数</div>
        <div>每日累计总死亡人数</div>
        <div>每日累计相对死亡率（总康复人数:总死亡人数）</div>
        
        <div class='sub-header'>
            <strong>疫情新增统计</strong>
        </div>
        <div>每日单日新增人数统计</div>
        <div>每日单日新增康复人数</div>
        <div>每日单日新增死亡人数</div>
        <div>每日单日相对死亡率（新增康复：新增死亡）</div>

        <div class='sub-header'>
            <strong>疫情密度确诊</strong>
        </div>
        <div>每日感染密度统计</div>
        <div>每日累计总感染率（每十万人感染数）</div>
        <div>每日累计总确诊密度（每平方公里城市建成区面积）</div>
    </div>
    
    <div class='chart-cont' id='chart-cont-trend'>

        <!-- <svg class='chart' id='chart-trend'>

        </svg> -->
        <!-- <svg class='yAxis' id='yAxis-trend'>

        </svg> -->
        <svg class='xAxis' id='xAxis-trend'>

        </svg>
        <svg class='graph' id='graph-trend'>

        </svg>

        <svg class='chart' id='chart-ranking'>

        </svg>
    </div>

    <!-- <div class='chart-cont' id='chart-cont-change'>
        <svg class='chart' id='chart-change'>

        </svg>
    </div> -->
    <!-- <div class='chart-cont' id='chart-cont-map'>
        <svg class='chart' id='chart-map'>

        </svg>
    </div> -->

    <div class='chart-cont' id='chart-cont-pie'>

        <div id='selector-mode-title'><b>选择绘制趋势的地区： </b></div>
        <div id='region-selector' class='selector-mode'>
            <div class='selector-title' id='compare-mode-title'><b>对比模式</b></div>
            <div class='selector-cont'>
                <input name='region-selector' class='compare-mode' id='Hubei-cities' type='radio'>
                <label class='display-label' for='Hubei-cities'>对比湖北所有城市</label>
            </div>

            <div class='selector-cont'>
                <input name='region-selector' class='compare-mode' id='customized-regions' type='radio'>
                <label class='display-label' for='customized-regions'>自定义对比地区（最多20个）</label>
            </div>
        </div>

        <div id='ranking-selector' class='selector-mode'>
            <div class='selector-title' id='ranking-mode-title'><b>排名模式</b></div>

            <div class='selector-cont'>
                <input name='region-selector' class='ranking-mode' id='top20-cities' type='radio'>
                <label class='display-label' for='top20-cities'>全国排名前20城市</label>
            </div>

            <div class='selector-cont'>
                <input name='region-selector' class='ranking-mode' id='top20-provinces' type='radio'>
                <label class='display-label' for='top20-provinces'>全国排名前20省份</label>
            </div>

        </div>

        <div id='selector-var-title'><b>{{prompt}}</b></div>
        <div id='sum-selector' class='selector-var'>
            <!-- <div class='selector-title' id='sum-selector-title'><b>总人数统计：</b></div>
            <div class='selector-cont'>
                <input name='display-selector' class='display-selector' id='infected-sum' type='radio'>
                <label class='display-label' for='infected-sum'>感染总人数</label>
            </div>

            <div class='selector-cont'>
                <input name='display-selector' class='display-selector' id='cured-sum' type='radio'>
                <label class='display-label' for='cured-sum'>康复总人数</label>
            </div>

            <div class='selector-cont'>
                <input name='display-selector' class='display-selector' id='dead-sum' type='radio'>
                <label class='display-label' for='dead-sum'>死亡总人数</label>
            </div>
        </div>

        <div id='change-selector' class='selector-var'>
            <div class='selector-title' id='change-selector-title'><b>日增加人数统计：</b></div>
            <div class='selector-cont'>
                <input name='display-selector' class='display-selector' id='infected-change' type='radio'>
                <label class='display-label' for='infected-change'>日增加感染人数</label>
            </div>

            <div class='selector-cont'>
                <input name='display-selector' class='display-selector' id='cured-change' type='radio'>
                <label class='display-label' for='cured-change'>日增加康复人数</label>
            </div>

            <div class='selector-cont'>
                <input name='display-selector' class='display-selector' id='dead-change' type='radio'>
                <label class='display-label' for='dead-change'>日增加死亡人数</label>
            </div>
        </div>

        <div id='per100000-selector' class='selector-var'>
            <div class='selector-title' id='change-selector-title'><b>每十万人统计：</b></div>
            <div class='selector-cont'>
                <input name='display-selector' class='display-selector' id='infected-per100000' type='radio'>
                <label class='display-label' for='infected-per100000'>每十万人感染人数</label>
            </div>

            <div class='selector-cont'>
                <input name='display-selector' class='display-selector' id='cured-per100000' type='radio'>
                <label class='display-label' for='cured-per100000'>每十万人康复人数</label>
            </div>

            <div class='selector-cont'>
                <input name='display-selector' class='display-selector' id='dead-per100000' type='radio'>
                <label class='display-label' for='dead-per100000'>每十万人死亡人数</label>
            </div>
        </div> -->
        </div>

    </div>

    <!-- <div id='timebar-cont'>
        <svg id='timebar'>

        </svg>
    </div> -->
    <script type="text/javascript" src="lib/leaflet/leaflet.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>

</html>